<template>
  <!-- <a-auto-complete
    v-model="searchCompanyName"
    style="width: 200px"
    allowClear
    option-label-prop="title"
    placeholder="请输入交易公司"
    @select="onSelect"
    @search="onSearch"
    @change="onChange"
  >
    <template slot="dataSource">
      <a-select-option
        v-for="item in companyList"
        :title="item.companyName"
        :key="item.companyId + ''"
      >
        {{ item.companyName }}
      </a-select-option>
    </template>
  </a-auto-complete> -->
  <a-select
    v-model="searchCompanyName"
    show-search
    optionFilterProp="children"
    :dropdownMatchSelectWidth="false"
    placeholder="请选择交易公司"
    style="width: 200px"
    :allowClear="allowClear"
    @change="onChange"
  >
    <a-select-option v-for="item in companyList" :key="item.companyId">{{
      item.companyName
    }}</a-select-option>
  </a-select>
</template>

<script>
import { getcustomerbyname } from "@/api/company";
import { debounce } from "@/util/common";

export default {
  props: {
    value: {
      type: [String, Number]
    },
    allowClear: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    // 额外数据
    extra: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      companyList: []
    };
  },
  computed: {
    searchCompanyName: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    }
  },
  methods: {
    onChange(val) {
      this.$emit("change", val);
    },
    onSelect() {},
    onSearch: debounce(function() {
      this.queryCustomers();
    }),
    //   查询客户列表
    queryCustomers() {
      getcustomerbyname({
        customerName: this.searchCompanyName
      }).then(res => {
        let data = this.extra.concat(res);
        this.companyList = data;
      });
    }
  },
  created() {
    this.queryCustomers();
  }
};
</script>
